import React from 'react';
import { Tooltip } from 'antd';
import type { TooltipPropsWithOverlay } from 'antd/es/tooltip';

interface Props extends TooltipPropsWithOverlay {
  shouldWrapChildren?: boolean;
}

const MyTooltip = ({ children, shouldWrapChildren = true, title, ...props }: Props) => {
  let content = children;

  if (shouldWrapChildren && !React.isValidElement(children)) {
    content = <span>{children}</span>;
  }

  return (
    <Tooltip
      overlayClassName="antd-tooltip"
      color="#fff"
      overlayStyle={{
        boxShadow: '1px 1px 10px rgba(0,0,0,0.2)',
        borderRadius: '8px',
        // padding: '8px 16px',
        color: '#1D2129',
      }}
      arrow={{ pointAtCenter: true }}
      placement="top"
      {...props}
      title={title}
    >
      {content}
    </Tooltip>
  );
};

export default MyTooltip;
